<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>填写宠物信息</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/amazeui.datetimepicker.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/amazeui.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css"/>
    <style type="text/css">
        .am-form {
            width: 500px;
            margin-left: 85px;
        }

        #btn-next {
            padding-left: 240px;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div class="container w1000">
        <div id="processor">
            <ol class="processorBox oh">
                <li>
                    <div class="step_inner">
                        <span class="icon_step">1</span>
                        <h4>填写账户信息</h4>
                    </div>
                </li>
                <li>
                    <div class="step_inner">
                        <span class="icon_step">2</span>
                        <h4>填写个人信息</h4>
                    </div>
                </li>
                <li class="current">
                    <div class="step_inner">
                        <span class="icon_step">3</span>
                        <h4>填写宠物信息</h4>
                    </div>
                </li>
                <li>
                    <div class="step_inner">
                        <span class="icon_step">4</span>
                        <h4>完善案情概要</h4>
                    </div>
                </li>
            </ol>
            <div class="step_line"></div>
        </div>
        <div class="content w1000">
            <div class="legend"><h3>填写宠物信息</h3></div>
            <form class="am-form am-form-horizontal" action="${pageContext.request.contextPath}/account/addChildren.do"
                  method="post" enctype="multipart/form-data">
                <div class="am-form-group">
                    <label class="am-u-sm-3 am-form-label" for="doc-ipt-name-1">宠物名称</label>
                    <div class="am-u-sm-9">
                        <input type="text" name="name" value="${children.name }" class="am-input-sm" id="doc-ipt-name-1"
                               placeholder="输入宠物名称">
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-u-sm-3 am-form-label" for="doc-ipt-idcard-1">宠物编号</label>
                    <div class="am-u-sm-9">
                        <input type="text" name="id_card" value="${children.id_card }" class="am-input-sm"
                               id="doc-ipt-idcard-1" placeholder="输入宠物编号">
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-u-sm-3 am-form-label" for="doc-ipt-age-1">年龄</label>
                    <div class="am-u-sm-9">
                        <input type="text" name="age" value="${children.age}" class="am-input-sm" id="doc-ipt-age-1"
                               placeholder="输入年龄">
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-u-sm-3 am-form-label" for="doc-ipt-sex-1">性别</label>
                    <div class="am-u-sm-9">
                        <div class="am-radio">
                            <label> <input type="radio" name="sex" value="1"
                                           checked> 公 </labe>
                        </div>
                        <div class="am-radio">
                            <label> <input type="radio" name="sex" value="2">
                                母
                            </label>
                        </div>
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-u-sm-3 am-form-label" for="doc-ta-charac-1">宠物特征</label>
                    <div class="am-u-sm-9">
                        <textarea class="" name="characteristic" rows="5"
                                  id="doc-ta-charac-1">${children.characteristic }</textarea>
                    </div>
                </div>
                <div class="am-form-group am-form-file">
                    <label class="am-u-sm-3 am-form-label" for="doc-form-file">图片文件1</label>
                    <div class="am-u-sm-9">
                        <button type="button" class="am-btn am-btn-primary am-btn-sm">
                            <i class="am-icon-cloud-upload"></i> 选择要上传的图片文件
                        </button>
                        <input id="doc-form-file-1" name="files" type="file" multiple>
                        <div id="file-list"></div>
                    </div>
                </div>
                <div class="am-form-group am-form-file">
                    <label class="am-u-sm-3 am-form-label" for="doc-form-file-2">图片文件2</label>
                    <div class="am-u-sm-9">
                        <button type="button" class="am-btn am-btn-primary am-btn-sm">
                            <i class="am-icon-cloud-upload"></i> 选择要上传的图片文件
                        </button>
                        <input id="doc-form-file-2" name="files" type="file" multiple>
                        <div id="file-list-2"></div>
                    </div>
                </div>
                <div id="btn-next" class="am-form-group">
                    <!-- 注册时的userid -->
                    <input type="hidden" name="guardian_id" value="${user_id }">
                    <!-- session中的userId  -->
                    <input type="hidden" name="current_id" value="${user.id }">
                    <!-- 报案时查询到的childrenId -->
                    <input type="hidden" name="children_id" value="${children.id }">
                    <input class="am-btn am-btn-primary" type="submit" value="下一步">
                </div>
            </form>
        </div>
    </div><!-- // container end -->
</div><!-- // wrapper end -->
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/amazeui.min.js"></script>
<script>
    $(function () {
        $('#doc-form-file-1').on('change', function () {
            var fileNames = '';
            $.each(this.files, function () {
                fileNames += '<span class="am-badge">' + this.name + '</span> ';
            });
            $('#file-list').html(fileNames);
        });
    });
    $(function () {
        $('#doc-form-file-2').on('change', function () {
            var fileNames = '';
            $.each(this.files, function () {
                fileNames += '<span class="am-badge">' + this.name + '</span> ';
            });
            $('#file-list-2').html(fileNames);
        });
    });
</script>
</body>
</html>